<template>
  <div v-if="loading">加载中...</div>
  <div class="container" v-else>
    <div id="banner">
      <div class="all-sort-list" style="background-color: #fb9968;z-index: 99999;height: 450px;">

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[0].categoryId)">{{
              goods.category[0].categoryName
            }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[1].categoryId)">{{
              goods.category[1].categoryName
            }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[2].categoryId)">{{
              goods.category[2].categoryName
            }}</router-link>
          </h3>
        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[3].categoryId)">{{
              goods.category[3].categoryName
            }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[4].categoryId)">{{
              goods.category[4].categoryName
            }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[5].categoryId)">{{
              goods.category[5].categoryName
            }}</router-link>
          </h3>
        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[6].categoryId)">{{
              goods.category[6].categoryName
            }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[7].categoryId)">{{
              goods.category[7].categoryName
            }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[8].categoryId)">{{
              goods.category[8].categoryName
            }}</router-link>
          </h3>
        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[9].categoryId)">{{
              goods.category[9].categoryName
            }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[10].categoryId)">{{
              goods.category[10].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[11].categoryId)">{{
              goods.category[11].categoryName }}</router-link>
          </h3>
        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[12].categoryId)">{{
              goods.category[12].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[13].categoryId)">{{
              goods.category[13].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[14].categoryId)">{{
              goods.category[14].categoryName }}</router-link>
          </h3>

        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[15].categoryId)">{{
              goods.category[15].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[16].categoryId)">{{
              goods.category[16].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[17].categoryId)">{{
              goods.category[17].categoryName }}</router-link>
          </h3>

        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[18].categoryId)">{{
              goods.category[18].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[19].categoryId)">{{
              goods.category[19].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[20].categoryId)">{{
              goods.category[20].categoryName }}</router-link>
          </h3>

        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[21].categoryId)">{{
              goods.category[21].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[22].categoryId)">{{
              goods.category[22].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[23].categoryId)">{{
              goods.category[23].categoryName }}</router-link>
          </h3>

        </div>

        <div class="item">
          <h3><span>·</span>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[24].categoryId)">{{
              goods.category[24].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[25].categoryId)">{{
              goods.category[25].categoryName }}&nbsp;&nbsp;</router-link>
            <router-link :to="{ path: '/searchGoods' }" @click="showGoodsByCategory(goods.category[26].categoryId)">{{
              goods.category[26].categoryName }}</router-link>
          </h3>

        </div>
      </div>
      <!-- 轮播图 -->
      <div>
        <el-carousel :interval="3000" arrow="always" height="450px">
          <el-carousel-item v-for="item in flowimages" :key="item">
            <img :src="item.carouselUrl" alt="" :style="{
              height: '100%',
              width: '100%'
            }">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Store from '../stores/Store';
export default {

  data() {
    return {
      message: "Hello",
      flowimages: [
      ],
      goods: Store(),
      loading: true,
    };
  },
  beforeCreate() {
    axios.post('http://localhost:8080/goods/carousel').then(resp => {
      this.flowimages = resp.data

      axios.post('http://localhost:8080/goods//searchCategory').then(resp => {
        this.goods.category = resp.data
        this.loading = false
      })
    })

  },
  methods: {
    showGoodsByCategory(id) {
      axios.post('http://localhost:8080/goods/searchGoodsByCategory/' + id).then(resp => {
        this.goods.searchGoodsInfo = resp.data
      })
      this.goods.from = 1
      this.goods.categoryId = id
    }
  }
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>